
<template>
  <div class="home">
    <div class="header">
      <div class="col-sm-8 header-left">
        <div class="logo">
          <a @click="goFunc(1)">
            <img src="../../assets/images/logo.png" alt />
          </a>
        </div>
        <div class="menu">
          <a class="toggleMenu" href="#">
            <img src="../../assets/images/nav.png" alt />
          </a>
          <ul class="nav" id="nav">
            <li class="active">
              <a @click="goFunc(1)">主页</a>
            </li>
            <li>
              <a @click="goFunc(2)">订房页面</a>
            </li>
            <li>
              <a @click="goFunc(3)">个人页面</a>
            </li>
            <li>
              <a @click="goFunc(4)">照片墙</a>
            </li>
            <div class="clearfix"></div>
          </ul>
        </div>
      </div>
      <div class="col-sm-4 header_right">
        <div id="loginContainer">
          <a href="#" id="loginButton"></a>
          <img src="../../assets/images/login.png" />
          <!--登录按钮，dialogFormVisible控制着下方的dialog是否显示出来-->
          <el-button round @click="dialogVisible  = true">
            <div v-if="this.$store.getters.getPrivilege==1">{{username}}</div>
            <div v-if="this.$store.getters.getPrivilege==2">{{username}}</div>
            <div v-else>登录你的账号</div>
          </el-button>
          <div v-if="this.$store.getters.getPrivilege==1">
            <el-button type="text" @click="logout">退出账号</el-button>
          </div>
          <div v-if="this.$store.getters.getPrivilege==2">
            <el-button type="text" @click="logout">退出账号</el-button>
          </div>
          <div v-else>
            <el-dialog title="登录你的账号" :visible.sync="dialogVisible" width="23%" center>
              <login></login>
              <div>
              <el-dialog width="30%" title="注册" :visible.sync="innerVisible" append-to-body>
                <register></register>
              </el-dialog>
              </div>
              <div>
              <el-dialog width="30%" title="修改密码" :visible.sync="innerVisible2" append-to-body>
                <findPassword></findPassword>
              </el-dialog>
              </div>
              <div slot="footer" class="dialog-footer">
                <el-button type="text" @click="dialogVisible = false">取 消</el-button>
                <el-button type="text" @click="innerVisible = true">注册</el-button>
                <el-button type="text" @click="innerVisible2 = true">忘记密码</el-button>
              </div>
            </el-dialog>
          </div>
        </div>
        <div class="clearfix"></div>
      </div>
      <div class="clearfix"></div>
    </div>
    <a-layout-content style="padding: 0 50px">
      <router-view></router-view>
    </a-layout-content>
  </div>
</template>

<script type="text/javascript" src="js/responsive-nav.js"></script>
<script>
import login from "./login/login";
import register from "./register/register";
import findPassword from "./findPassword/findPassword"

import { getUser, getUsers } from "../../api/login";
export default {
  name: "home",
  data() {
    return {
      type: 0,
      msg: "我的订单模块",
      dialogVisible: false,
      innerVisible: false,
      innerVisible2: false,
      id: 0,
      queryParam: {
        pageSize: 10,
        pageNo: 1,
        username: ""
      },
      info: {},
      list: []
    };
  },

  components: {
    login,
    register,
    findPassword
  },

  filters: {},

  computed: {
    username() {
      //let username = sessionStorage.getItem("login_username");
      let username = this.$store.getters.getUser;
      if (this.$store.getters.getPrivilege == 2) {
        this.dialogVisible = false;
      }
      return username || this.name;
    }
  },
  mounted: function() {},
  methods: {
    openDialog() {
      this.visible = true; // 通过data显式控制dialog
    },
    logout() {
      this.$confirm("此操作退出登录, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$axios({
            method: "POST",
            url: "/ssms/logout",
            headers: {
              "Content-Type": "application/json"
            },
            responseType: "application/json",
            withCredentials: true
          })
            .then(res => {
              if (res.data.code === 0) {
                console.log("in the code");
                this.$store.commit("setNull");

                this.$router.push("/userView/rooms");
                this.$message({
                  type: "success",
                  message: "退出成功!"
                });
              }
            })
            .catch(err => {
              console.log(err);
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },

    goFunc: function(i) {
      switch (i) {
        case 1:
          this.$router.push({
            path: "/userView/home"
          });
          break;
        case 2:
          this.$router.push({
            path: "/userView/rooms"
          });
          break;
        case 3:
          this.$router.push({
            path: "/userView/myself"
          });
          break;
        case 4:
          this.$router.push({
            path: "/userView/gallery"
          });
          break;
      }
    }
  }
};
</script>

<style>
</style>
